<template>
    <myMoveBox @rootmove="root_MoveEvent" ref="myMoveBoxDom" :posi="[posi_cur.x, posi_cur.y]">
        <div class="content-root" :style="'width:' + posi_cur.w + 'px;height:' + posi_cur.h + 'px;'"
            :class="!isShow ? 'b' : ''">
            <TransitionGroup name="view-transition" mode="out-in" v-if="isClick">
                <div class="header" v-if="!isShow" @click="show_ClickEvent">
                    <slot name="show">

                    </slot>
                </div>
                <div class="content" v-else>
                    <slot name="hide">

                    </slot>
                </div>
            </TransitionGroup>
            <TransitionGroup v-else>
                <div class="header" v-if="!isShow">
                    <slot name="show">

                    </slot>
                </div>
                <div class="content" v-else>
                    <slot name="hide">

                    </slot>
                </div>
            </TransitionGroup>
        </div>
    </myMoveBox>
</template>

<script setup>
import { onMounted } from 'vue';
import myMoveBox from './index.vue'

const props = defineProps({
    default: {
        type: Boolean,
        default: false,
        require: false,
    },
    isClick: {
        type: Boolean,
        default: true,
        require: false,
    },//允许点击图标切换状态
    x: Number,
    y: Number,
});

const emits = defineEmits(["show", "hide"]);

const posi_old = ref({
    x: 0,
    y: 0,
    w: 100,
    h: 100,
});
const posi_cur = ref({
    x: 0,
    y: 0,
    w: 50,
    h: 50,
});

const isShow = ref(false);
const myMoveBoxDom = ref();
onMounted(() => {
    if (props.default)
        setTimeout(() => {
            show_ClickEvent(true);
        }, 500);

    const { x, y } = props;
    posi_cur.value.x = x != undefined ? Number(x) : 1;
    posi_cur.value.y = y != undefined ? Number(y) : 1;

    myMoveBoxDom.value.move(posi_cur.value.x, posi_cur.value.y);
})

const root_MoveEvent = (data) => {
    posi_cur.value.x = data.x;
    posi_cur.value.y = data.y;
}

const show_ClickEvent = () => {
    isShow.value = !isShow.value;
    if (isShow.value) {
        emits('show');
    } else {
        emits('hide');
        reset();
    }
}

const cliear_ClickEvent = () => {
    if (isShow.value) {
        show_ClickEvent();
    }
}

const move = (wh, xy = null, isLog = true, duration = 0.3) => {
    //记录旧位置
    if (isLog) {
        posi_old.value = JSON.parse(JSON.stringify(posi_cur.value))
    }

    const curxy = [];
    if (xy == null) {
        //自动居中
        const { clientWidth, clientHeight } = document.documentElement;
        curxy[0] = (clientWidth - wh[0]) / 2;
        curxy[1] = (clientHeight - wh[1]) / 2;
    } else {
        curxy[0] = xy[0];
        curxy[1] = xy[1];
    }

    posi_cur.value.x = curxy[0];
    posi_cur.value.y = curxy[1];
    posi_cur.value.w = wh[0];
    posi_cur.value.h = wh[1];

    myMoveBoxDom.value.move(curxy[0], curxy[1], duration);
}

const moveTo = ({
    xy = [],
    wh = [],
    isLog = true,
    duration = 0.3,
    showState = 0,//0:不动,1:打开,2:关闭
}) => {
    move(wh, xy, isLog, duration);
    if (showState == 1) {
        show();
    } else if (showState == 2) {
        clear();
    }
}

//在未打开状态执行打开
const show = () => {
    if (!isShow.value)
        show_ClickEvent();
}

//在打开状态回归原位
const clear = () => {
    cliear_ClickEvent();
}

//回归原位
const reset = () => {
    posi_cur.value = JSON.parse(JSON.stringify(posi_old.value))
    myMoveBoxDom.value.move(posi_cur.value.x, posi_cur.value.y);
    clear();
}

//是否允许左键移动
const isMove = (move) => {
    myMoveBoxDom.value.isMoveA(move);
}

defineExpose({
    move, moveTo, show, clear, reset, isMove,
})

//#region anime
const item_LeaveEvent = (el, done) => {
    console.log(el)
}
const item_EnterEvent = (el, done) => {

}
//#endregion

</script>

<style scoped lang="scss">
.content-root {
    z-index: 9997;
    border-radius: 7px;
    position: relative;
    transition-duration: 0.3s;
    overflow: hidden;

    .header {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
    }

    .content {
        width: 100%;
        height: 100%;
    }

    .clear {
        position: absolute;
        top: 5px;
        right: 5px;
        background-image: url('@/static/icon/close-w.svg');
        width: 20px;
        height: 20px;
        background-size: cover;
        background-position: center;
    }

}
</style>